<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网易云课堂</title>
	<style>
	body{
		margin:0;
		padding:0;
	}
		.content{
			width:1300px;
			height:560px;
			background-color: pink;
		}

		.header{
			height:60px;
			background-color: gray;
		}

		.header img{
			float:left;
			margin-left: 20px;
			margin-top: 15px;
			display: inline-block;
		}
		.header ul{
			float:left;
			width:300px;
			height:60px;
			margin:0;
			padding:0;
			list-style: none;
			display:inline-block;
		}
		.header a{
			margin:0;
			margin-left: 20px;
			width:80px;
			height:60px;
			line-height: 60px;
			text-decoration: none;
			text-align: center;
			font-size: 15px;
			color: white;
			display:inline-block;
		}
		a:hover{
			background-color: white;
		}
		.header li{
			float:left;
			width: 90px;
		}
		.headermiddle select{
			float:left;
			margin:0;
			padding:0;
			margin-top:11px;
			border-right:none;
			width:50px;
			height:40px;
		}
		.headermiddle input{
			margin:0;
			padding:0;
			margin-top:10px;
			border-left:none;
			float:left;
			width:200px;
			height:36px;
		}
		.headermiddle img{
			float:left;
			margin:0;
			padding:0;
			margin-top: 12px;
		}
		.headermiddle a:hover{
			background-color: white;
		}
		.headerright ul{
			float:left;
			width:360px;
			height:60px;
			margin:0;
			padding:0;
			list-style: none;
			display:inline-block;
		}
		.headerright li{
			margin:0;
			margin-left: 20px;
			width:60px;
			height:60px;
			line-height: 60px;
			text-decoration: none;
			text-align: center;
			font-size: 15px;
			color: white;
			display:inline-block;
		}
		.navigator{
			overflow: none;
			margin:0;
			padding:0;
			margin:0 auto;
			height:85px;
			background-color: white;
		}
		.navigator h4{
			margin:0;
			padding:0;
/*			padding-top: 10px;
			padding-left:20px;*/
			color:gray;
		}
		.allli ul{
			list-style: none;
			margin:0;
			padding:0;
			height:40px;
			
		}
		.allli li{
			display: inline-block;
			width:100px;
			text-align: center;
		}
		.allli a{
			line-height: 40px;
			text-decoration:none;
			color:gray;
		}
		.allli a:hover{

		}
	.banner{
			overflow: none;
			margin:0;
			padding:0;
			margin:0 auto;
			width:1250px;
			height:30px;
			margin-top:25px;
			background-color: white;
		}
	.banner ul{
		list-style: none;
	}
	.banner li{
		width:60px;
		height:30px;
		display: inline-block;
	}
	.banner a{
		line-height: 30px;
		color:black;
		text-decoration:none;
	}
	.banner a:hover{
		color:green;
	}
		.main{
			width:1250px;
			height:320px;
			margin:0 auto;
			margin-top: 20px;
			background:yellow;
			position:absolute;
		}
		.main .pic1{
			width:223px;
			height:320px;
			background-color: white;
			float:left;
			margin-right: 34px;
		}
		.main h4,h5{
			margin:0;
			padding:0;
			margin-left:10px;
			margin-top: 6px;
			color:gray;
		}

		.main .pic2{
			width:223px;
			height:320px;
			background-color: white;
			float:left;
			margin-right: 34px;
		}
		.main .pic3{
			width:223px;
			height:320px;
			0px;
			background-color: white;
			float:left;
			margin-right: 32px;
		}
		.main .pic4{
			width:223px;
			height:320px;
			background-color: white;
			float:left;
			margin-right: 32px;
		}
		.main .pic5{
			width:223px;
			height:320px;
			background-color: white;
			float:left;
		}
		.main .star1,.star2,.star3,.star5{
				position:relative;
				top:50px;
		}
		.main .star2,.star4{
			position:relative;
			top:30px;
		}
		.main .star4,.star5{
			position:relative;
			left:10px;
		}
		.main h1{
			margin-left: 10px;
			font-size: 10px;
			font-style:Arial;
			color:gray;
		}

		.main p{
			display: inline-block;
			color:gray;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="header">
			<img src="image/image/logo.png">
			<ul>
				<li><a href="#">精品课</a></li>
				<li><a href="#">微专课</a></li>
				<li><a href="#">下载APP</a></li>
			</ul>
			
			<div class="headermiddle">
				<select name="course" id="course">
						<option value="html" selected="selected">课程</option>
						<option value="html">HTML</option>
						<option value="html">HTML</option>
				</select>
				<input type="text" placeholder="搜索课程" >
				</input>
				<img src="image/image/search.png">
			</div>
			<div class="headerright">
				<ul>
						<li><a href="#">我的学习</a></li>
						<li><a href="#">消息</a></li>
						<li><a href="#">购物车 &nbsp;&nbsp;|</a></li>
						<li><a href="#">登录/注册</a></li>
				</ul>
				<img src="image/image/small.jpg">
			</div>
					

		</div>
		<div class="navigator">
			<h4>首页 &nbsp;> &nbsp;精品课</h4>
			<div class="allli">
					<ul>
						<li><a href="#">全部</a></li>
						<li><a href="#">办公效率</a></li>
						<li><a href="#">职业发展</a></li>
						<li><a href="#">编程开发</a></li>
						<li><a href="#">产品和设计</a></li>
						<li><a href="#">生活方式</a></li>
						<li><a href="#">升学辅导</a></li>
						<li><a href="#">语言学习</a></li>
					</ul>
			</div>
			
		</div>
		<div class="banner">
			<ul>
				<li><a href="#">畅销</a></li>
				<li><a href="#">好评</a></li>
				<li><a href="#">新课</a></li>
			</ul>
		</div>
		<div class="main">
			<div class="pic1">
				<img src="image/image/1.png">
				<h4>秋叶Offer三合一</h4>
				<h5>幻方秋叶PPT</h5>
				<div class="star1">
					<img src="image/image/star.png">
					<p> 5 (5436人学过)</p>
					<h1>&yen 399.00</h1>
				</div>
			</div>
			<div class="pic2">
				<img src="image/image/2.png">
				<h4>PS教程超级合辑【800+集爆款课】</h4>
				<h5>设计软件通</h5>
				<div class="star2">
					<img src="image/image/star.png">
					<p> 5 (5436人学过)</p>
					<h1>&yen 399.00</h1>
				</div>
			</div>
			<div class="pic3">
				<img src="image/image/3.jpg">
				<h4>和秋叶一起学PPT</h4>
				<h5>幻方秋叶PPT</h5>
					<div class="star3">
						<img src="image/image/star.png">
						<p> 5 (5436人学过)</p>
						<h1>&yen 399.00</h1>
					</div>
			</div>
			<div class="pic4">
				<img src="image/image/4.jpg">
				<h4>街舞微信竖版视频零基础制作课程</h4>
				<h5>街舞影像人</h5>
				<div class="star4">
					<p> 436人学过</p>
					<h1>&yen 399.00</h1>
				</div>
				
						
					
			</div>
			<div class="pic5">
				<img src="image/image/5.png">
				<h4>VIP学习卡使卖家快速成长</h4>
				<h5>启伦教育</h5>
					<div class="star5">
						<p> 36人学过</p>
						<h1>&yen 399.00 <del>&yen 1399.00</del></h1>
					</div>	
					
					
			</div>
		</div>
	</div>
</body>
</html>